<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>BHUDY - 菜单管理</title>
    <script src="/res/js/bhudy.js"></script>
    <script src="/res/layui/layui.js"></script>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-col-xs12">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" lay-verify="name" autocomplete="off" placeholder="请输入名称"
                               class="layui-input">
                    </div>
                    <div class="layui-inline">
                        <button type="submit" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="search">搜索</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        <button type="button" class="layui-btn layui-btn-primary" onclick="javascript:location.reload();">刷新</button>
                    </div>
                </div>
            </form>
            <table id="tableDataList" class="layui-table" lay-filter="tableDataList"
                   lay-data="{url:'/api/v1/sysMenus', page:true, id:'tableDataList',toolbar:'default', defaultToolbar:['filter', 'exports', 'print']}">
                <thead>
                <tr>
                    <th lay-data="{type:'checkbox', fixed: 'left'}"></th>
                    <th lay-data="{field:'id', width:80, sort: true, fixed: 'left'}">ID</th>
                    <th lay-data="{field: 'name', width:150}">name</th>
                    <th lay-data="{field: 'parentId', width:150}">parentId</th>
                    <th lay-data="{field: 'level', width:150}">level</th>
                    <th lay-data="{field: 'path', width:150}">path</th>
                    <th lay-data="{field: 'icon', width:150}">icon</th>
                    <th lay-data="{field: 'menuOrder', width:150}">menuOrder</th>
                    <th lay-data="{field: 'type', width:150}">type</th>
                    <th lay-data="{field: 'url', width:150}">url</th>
                    <th lay-data="{field: 'component', width:150}">component</th>
                    <th lay-data="{field: 'perms', width:150}">perms</th>
                    <th lay-data="{field: 'status', width:150}">status</th>
                    <th lay-data="{field: 'remark', width:150}">remark</th>
                    <th lay-data="{field: 'updateDate', width:150}">updateDate</th>
                    <th lay-data="{field: 'updateBy', width:150}">updateBy</th>
                    <th lay-data="{field: 'createDate', width:150}">createDate</th>
                    <th lay-data="{field: 'createBy', width:150}">createBy</th>
                    <th lay-data="{fixed: 'right', width:178, align:'center', toolbar: '#barDemo'}"></th>
                </tr>
                </thead>
            </table>

            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>
        </div>
    </div>
</div>
</body>
<script>
    layui.use(['table', 'form', 'layedit', 'laydate'], function () {
        var table = layui.table,
            form = layui.form,
            layer = layui.layer,
            layedit = layui.layedit,
            laydate = layui.laydate,
            url = "",
            $ = layui.jquery;


        //自定义验证规则
        form.verify({
            name: function (value) {
                if (value.length < 5) {
                    return '标题至少得5个字符啊';
                }
            }
        });

        //监听头工具栏事件
        table.on('toolbar(tableDataList)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id)
                , dataList = checkStatus.data; //获取选中的数据
            switch (obj.event) {
                case 'add':
                    showUpdateOrCreate();
                    break;
                case 'update':
                    if (dataList.length === 0) {
                        layer.msg('请选择一行');
                    } else if (dataList.length > 1) {
                        layer.msg('只能同时编辑一个');
                    } else {
                        showUpdateOrCreate(dataList[0]);
                    }
                    break;
                case 'delete':
                    if (dataList.length === 0) {
                        layer.msg('请选择一行');
                    } else {
                        var id = "";
                        dataList.forEach(data => {
                            id += "," + data.id;
                        });
                        layer.alert('删除 [id]：' + id);
                    }
                    break;
            }
        });

        //监听行工具事件
        table.on('tool(tableDataList)', function (obj) {
            var data = obj.data;
            console.log(obj.data)
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del();
                    layer.close(index);
                    table.reload("tableDataList", {
                        where: {}
                    });
                });
            } else if (obj.event === 'edit') {
                showUpdateOrCreate(data)
            }
        });

        // 搜索框
        form.on('submit(search)', function (data) {
            table.reload("tableDataList", {
                where: data.field,
                page: {curr: 1}//重新从第 1 页开始
            });
            return false;
        });

        // 修改或者添加方法
        form.on('submit(updateOrCreateBtn)', function (data) {
            if (data.field.userId) {
                $.ajaxJsonPUT(url, JSON.stringify(data.field), function (resultData) {
                    resultFun(resultData);
                })
            } else {
                $.ajaxJsonPOST(url, JSON.stringify(data.field), function (resultData) {
                    resultFun(resultData);
                })
            }
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });


        // 拿到后台返回结果做处理
        function resultFun(resultData) {
            layer.msg(resultData.message);
            if (resultData.code === 0) {
                setTimeout(function () {
                    layer.closeAll();
                    table.reload("tableDataList", {
                        where: null,
                        page: {curr: 1}//重新从第 1 页开始
                    });
                }, 2000);
            }
        }

        // 显示修改或者添加弹出窗口
        function showUpdateOrCreate(data) {
            //页面层-自定义
            let index = layer.open({
                type: 1,
                title: '操作窗口',
                closeBtn: 1,
                skin: 'layui-layer-lan',
                maxmin: true,
                btn: ['提交', '取消'],
                yes: function (index, layero) {
                    $("#updateOrCreateBtn").click();
                    return false;
                },
                content: `<form class="layui-form" style="margin: 10px 50px;" action="" lay-filter="updateOrCreateForm">
                            <input type="hidden" name="id" lay-verify="id" autocomplete="off" class="layui-input">
                            <div class="layui-form-item">
                                <label class="layui-form-label">name</label>
                                <div class="layui-input-block">
                                    <input type="text" name="name" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">parentId</label>
                                <div class="layui-input-block">
                                    <input type="text" name="parentId" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">level</label>
                                <div class="layui-input-block">
                                    <input type="text" name="level" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">path</label>
                                <div class="layui-input-block">
                                    <input type="text" name="path" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">icon</label>
                                <div class="layui-input-block">
                                    <input type="text" name="icon" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">menuOrder</label>
                                <div class="layui-input-block">
                                    <input type="text" name="menuOrder" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">type</label>
                                <div class="layui-input-block">
                                    <input type="text" name="type" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">url</label>
                                <div class="layui-input-block">
                                    <input type="text" name="url" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">component</label>
                                <div class="layui-input-block">
                                    <input type="text" name="component" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">perms</label>
                                <div class="layui-input-block">
                                    <input type="text" name="perms" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">status</label>
                                <div class="layui-input-block">
                                    <input type="text" name="status" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">remark</label>
                                <div class="layui-input-block">
                                    <input type="text" name="remark" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <button type="submit" style="display: none;" id="updateOrCreateBtn" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="updateOrCreateBtn"></button>
                        </form>`
            });
            layer.full(index);
            // 绑定数据
            form.val('updateOrCreateForm', data);
        }
    });
</script>
</html>